<template>
  <div class="demo-app">
    <div :style="topStyle" style="width: 100%">
      <button @click="changeHeight">改变高度</button>
      <button @click="cleanSelect">清除select</button>
    </div>
    <div style="width: 100%; flex: 1; position: relative; overflow: hidden">
      <AVirtuallyTable
        ref="avtable"
        :pagination="true"
        :paginationOption="paginationOption"
        :columns="columns"
        localstorageKey="123123"
        :openVirtuallyModel="true"
        :lineScrollBufferCount="200"
        rowKey="id"
        size="small"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          onSelect: onSelectRecord,
          selectAllPages: true,
          getCheckboxProps
        }"
        :dataSource="dataSource"
        @paginationChange="paginationChange"
        @rowClick="rowClick"
        :rightClickMenus="rightClickMenus"
        :rightClickMenusOption="rightClickMenusOption"
        :titleRightMenus="titleRightMenus">
        <span slot="action" class="table-operation">
          <a>Pause</a>
          <a>Stop</a>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item> Action 1 </a-menu-item>
              <a-menu-item> Action 2 </a-menu-item>
            </a-menu>
            <a> More <a-icon type="down" /> </a>
          </a-dropdown>
        </span>
        <span slot="categoryLabel" class="table-operation" slot-scope="{ index }">
          1 {{ index }} 1
        </span>
      </AVirtuallyTable>
    </div>
  </div>
</template>

<script>
  import AVirtuallyTable from '@/ant-virtually-table/table.vue';

  export default {
    name: 'App',
    components: { AVirtuallyTable },
    data() {
      let tableData = [];
      for (let i = 0; i < 60; i++) {
        tableData.push({
          id: i + 'id',
          name: 'NO222222222222222222222222222.' + i,
          age: 32,
          ooo: 'NO.' + i,
          createMemberName: i,
          categoryLabel: '协同',
          address1: 'no.' + i,
          address2: 'no.' + i,
          address3: 'no.' + i,
          address4: 'no.' + i,
          address5: 'no.' + i,
          address6: 'no.' + i,
          address7: 'no.' + i
        });
      }
      console.log('this.dataSource:00', tableData);
      return {
        selectedRowKeys: [],
        dataSource: tableData,
        topStyle: {
          height: '400px'
        },
        paginationOption: {
          page: 1,
          total: 100
        },
        columns: [
          {
            title: '标题',
            // title: top.$.i18n('common.subject.label'),
            dataIndex: 'name',
            ellipsis: true,
            minWidth: 'big',
            // fixed: 'left',
            key: 'subject',
            dropdownMenus: {
              asc: true,
              desc: true,
              freeze: true,
              fieldset: true
            }
          },
          {
            title: '发起人1',
            // title: top.$.i18n('common.sender.label'),
            dataIndex: 'createMemberName',
            key: 'createMemberName1',
            ellipsis: true,
            width: 200,
            dropdownMenus: {
              asc: true,
              desc: true,
              freeze: true,
              fieldset: true
            }
          },
          {
            title: '发起人2',
            // title: top.$.i18n('common.sender.label'),
            dataIndex: 'createMemberName',
            key: 'createMemberName2',
            ellipsis: true,
            width: 200,
            dropdownMenus: {
              asc: true,
              desc: true,
              freeze: true,
              fieldset: true
            }
          },
          {
            title: '发起人3',
            // title: top.$.i18n('common.sender.label'),
            dataIndex: 'createMemberName',
            key: 'createMemberName3',
            ellipsis: true,
            width: 200,
            dropdownMenus: {
              asc: true,
              desc: true,
              freeze: true,
              fieldset: true
            }
          },
          {
            title: '发起人4',
            // title: top.$.i18n('common.sender.label'),
            dataIndex: 'createMemberName',
            key: 'createMemberName4',
            ellipsis: true,
            width: 200,
            dropdownMenus: {
              // asc: true,
              // desc: true,
              freeze: true,
              fieldset: true
            }
          },
          {
            title: '发起人5',
            // title: top.$.i18n('common.sender.label'),
            dataIndex: 'createMemberName',
            key: 'createMemberName5',
            ellipsis: true,
            width: 200,
            dropdownMenus: {
              asc: true,
              desc: true,
              freeze: true,
              fieldset: true
            }
          },
          {
            title: '创建时间',
            // title: top.$.i18n('common.date.sendtime.label'),
            dataIndex: 'createDate',
            key: 'createDate',
            ellipsis: true,
            width: 150,
            fixed: 'right',
            dropdownMenus: {
              asc: {
                show: true,
                clickHandel: (col) => {
                  console.log('asc--->', col);
                }
              },
              desc: {
                show: true,
                clickHandel: (col) => {
                  console.log('desc--->', col);
                }
              },
              freeze: true,
              fieldset: true
            }
          }
        ],
        rightClickMenusOption: {
          style: { width: '200px' }
        },
        rightClickMenus: [
          {
            key: '1',
            name: '右键菜单1',
            click(record) {
              console.log(record);
            },
            icon: ''
          },
          {
            key: '2',
            name: '右键菜单2',
            click(record) {
              console.log(record);
            },
            filterHandel(record) {
              // 是否支持异步？？
              console.log(record);
              return false;
            },
            // 点击劫持
            clickInterceptor(record, menu) {
              console.log('clickInterceptor:', record, menu);
              // 返回ture 不关闭菜单
              return true;
            },
            height: 42, // 如果自定义的控件高度不是34，得给个高度，方便计算超出屏幕。正常情况可以不写。
            customRender(h, props) {
              let { record } = props;
              //
              return <span>自定义:{record.name}</span>;
            }
          },
          {
            key: '3',
            name: '右键菜单3',
            click(record) {
              console.log(record);
            },
            icon: 'cap-icon-daorudaochu'
          },
          {
            type: 'line',
            style: {}
          },
          {
            key: '4',
            name: '右键菜单4',
            change(record, menu) {
              record.checkBoxValue = menu.value;
            },
            clickInterceptor(record, menu) {
              console.log('clickInterceptor:', record, menu);
              // 返回ture 不关闭菜单
              return true;
            },
            valueHandel: (record, menu) => {
              console.log('valueHandel:', record, menu);
              // record.checkBoxValue = !record.checkBoxValue;
              return record.checkBoxValue;
            },
            icon: 'cap-icon-daorudaochu',
            type: 'checkBox'
          },
          {
            key: '41',
            name: '右键菜单41',
            value: true,
            icon: 'cap-icon-daorudaochu',
            type: 'checkBox'
          },
          {
            key: '5',
            name: '右键菜单5',
            click(record) {
              console.log(record);
            },
            icon: ''
          }
        ],
        titleRightMenus: {
          asc: true,
          desc: true,
          freeze: true,
          fieldset: true
        }
      };
    },
    props: {},
    created() {
      for (let index = 0; index < 100; index++) {
        this.rightClickMenus.push({
          key: 'dd' + index,
          name: '扩展' + index,
          click(record) {
            console.log(record);
          }
        });
      }
    },
    mounted() {
      setTimeout(() => {
        console.log('this.paginationOption:', 4);
        // this.paginationOption.page = 1;
        // this.columns[2].width = null;
        // this.columns = [this.columns[0], this.columns[1], this.columns[2]];
        // this.dataSource = [];
      }, 2000);
    },
    methods: {
      getCheckboxProps: (record) => ({
        props: {
          disabled: record.id == 5 + 'id'
        }
      }),
      changeHeight() {
        if (this.topStyle.height === '200px') {
          this.topStyle.height = '400px';
        } else {
          this.topStyle.height = '200px';
        }
        this.$nextTick(() => {
          this.$refs.avtable.resizeTable();
        });
      },
      cleanSelect() {
        this.selectedRowKeys = [];
        this.$refs.avtable.cleanRowSelection();
      },
      rowClick() {
        console.log('rowClick', arguments);
      },
      paginationChange(page, pageSize) {
        this.paginationOption.page = page;
        this.paginationOption.pageSize = pageSize;
        console.log('this.paginationOption:change', this.paginationOption.page);
        setTimeout(() => {
          this.paginationOption.page = 1;
          console.log('this.paginationOption:change', this.paginationOption.page);
          // this.columns[2].width = null;
          // this.columns = [this.columns[0], this.columns[1], this.columns[2]];
          // this.dataSource = [];
        }, 2000);
        console.log('this.paginationOption:4', pageSize);
      },
      onAllPagesChange(selectedRowKeys, selectedRows) {
        console.log('selectedRowKeys changed: 22', selectedRowKeys, selectedRows);
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        console.log('onSelect:', selectedRowKeys, selectedRows);
        this.selectedRowKeys = selectedRowKeys;
      },
      onSelectRecord(record, selected, selectedRows) {
        console.log(record, selected, selectedRows, 'rrrrrrrrrrrrrrrrrrrrrr');
      }
    }
  };
</script>
<style>
  @import url('../../assets/css/common.css');
</style>
<style lang="scss">
  .demo-app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  html,
  body {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
</style>
